<template>
  <el-dialog title="预览文章" :visible="dialogVisible"  @close="close" width="53%">
    <h2>{{article.title}}</h2>
    <div style="margin-bottom:5px;padding-left:5px;">
      {{article.createTime| dateFormat}}
      {{article.username}}
      <i class="el-icon-view" style="margin:0 4px;"></i>
      {{article.visits}}
    </div>
    <div v-html="article.articleBody" class="aritclebody"></div>
  </el-dialog>
</template>
<script>
export default {
  name: 'articledetail',
  filters: {
    dateFormat (val) {
      const date = new Date(val)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      hour = hour < 10 ? '0' + hour : hour
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return `${year}-${month}-${day} ${hour}:${minute}:${second} `
    }
  },
  methods: {
    close () {
      this.$emit('update:dialogVisible', false)
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    article: {
      required: true,
      type: Object
    }
  }
}
</script>
<style lang="scss" scoped>
.aritclebody{
  padding:5px;
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;

}
</style>
